<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>context解释</title>
    <script src="../vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    const app = Vue.createApp({
        data() {
            return {

            }
        },
        methods: {
            handleChange(){
                alert('change')
            }
        },
        template: `
          <child a="java" title="a" @change="handleChange">parent</child>
        `,
    });
    app.component('child',{
        props: {
            title:{
                name: String,
                default: '1111'
            },
            age:{
                name: Number,
                default: 18
            }
        },
        template:`<div @click="handleClick">child</div>`,
        setup(props,context){
            const {attrs,slots,emit} = context;
            console.log(attrs);
            console.log(props);
            const {h} = Vue;
            console.log(slots.default())
            // return () => h('div',{},slots.default())
            function handleClick(){emit('change')}
            return {handleClick}
        }
    })
    const vm = app.mount("#app");
</script>
</body>
</html>